<template>
  <div>
    <div>
      <el-radio v-model="radio1" label="1">男</el-radio>
      <el-radio v-model="radio1" label="2">女</el-radio>
    </div>
    <div>
      <el-radio disabled v-model="radio2" label="1">男</el-radio>
      <el-radio disabled v-model="radio2" label="2">女</el-radio>
    </div>
    <div>
      <el-radio-group v-model="radio3" @input="inputValue">
        <el-radio :label="1">男</el-radio>
        <el-radio :label="2">女</el-radio>
        <el-radio :label="3" border>不详</el-radio>
      </el-radio-group>

    </div>
    <div>
    <el-radio-group v-model="radio4" size="small">
      <el-radio-button label="上海"></el-radio-button>
      <el-radio-button label="北京" disabled ></el-radio-button>
      <el-radio-button label="广州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>
  </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      radio1: "2",
      radio2: "2",
      radio3: 3,
      radio4: "上海"
    };
  },
  methods:{
    inputValue(val){
      console.log(val);
    }
  }

}
</script>
<style scoped>
div{
  margin: 10px;
}
</style>